<template>
  <div class="app-container">
    <el-button
      class="collapesbutton"
      type="primary"
      plain
      style="left: 0; height: 10%"
      @click="show1 = !show1"
      v-show="!show1"
    >
      <i class="el-icon-d-arrow-right"></i>
    </el-button>
    <!-- <el-button
      class="collapesbutton"
      type="info"
      plain
      style="left:14px;height:5%;"
      @click="show2=!show2"
      v-show="!show1&&!show2">
      <i class="el-icon-d-arrow-right"></i>
    </el-button> -->
    <section style="height: 100%; margin: 0; width: 100%">
      <div
        class="treeMenu"
        style="
          background: #fff;
          height: 100%;
          width: calc(12% - 6px);
          float: left;
        "
        v-show="show1"
      >
        <el-button
          class="collapesbutton"
          type="primary"
          plain
          style="right: 1px; height: 10%"
          @click="show1 = !show1"
        >
          <i class="el-icon-d-arrow-left"></i>
        </el-button>
        <div
          class="head-container"
          style="border-right: 1px solid #dcdfe6"
          v-scrollbar
        >
          <el-input
            v-model="keyword"
            placeholder="请输入关键字"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin: 10px 0; width: 100%; hegith: 80%"
          />
          <el-collapse
            v-model="activeIndex"
            accordion
            @change="handleCollapseChange"
          >
            <el-collapse-item
              v-for="(item, i) in showMenuData"
              :key="i"
              :name="i.toString()"
            >
              <template slot="title">
                <i :class="item.icon"></i>
                <img
                  src="/static/image/iconSmallGeneralLibrary.gif"
                  alt="文档库"
                />
                <span slot="title" v-html="item.name" :title="item.name"></span>
              </template>
              <dynamic-tree
                :treeData="treeData"
                :folderName="folderName"
                @handleNodeClick="handleNodeClick"
                :showIcon="true"
              >
              </dynamic-tree>
            </el-collapse-item>
          </el-collapse>
          <!-- <el-menu :default-active="activeIndex" class="el-menu-vertical">
            <el-menu-item
              v-for="(item, i) in showMenuData"
              :key="i"
              :index="i.toString()"
              @click="handleOpen(item, i)"
            >
              <i :class="item.icon"></i>
              <img
                src="/static/image/iconSmallGeneralLibrary.gif"
                alt="文档库"
              />
              <span slot="title" v-html="item.name" :title="item.name"></span>
            </el-menu-item>
          </el-menu> -->
        </div>
      </div>
      <resize-bar v-show="show1" />
      <div
        :class="show1 ? '' : 'max-size'"
        style="
          height: 100%;
          box-sizing: border-box;
          min-width: 75%;
          max-width: 95%;
          width: calc(88% - 6px);
          float: right;
          box-sizing: border-box;
        "
      >
        <!-- <div
          style="width: calc(12% - 3px); height: 100%; float: left"
          class="treeMenu"
        >
          <div class="head-container" v-scrollbar>
            <el-input
              v-model="folderName"
              placeholder="请输入名称"
              clearable
              size="small"
              prefix-icon="el-icon-search"
              style="margin: 10px 0; width: 100%; hegith: 80%"
            />
            <dynamic-tree
              :treeData="treeData"
              :folderName="folderName"
              @handleNodeClick="handleNodeClick"
              :showIcon="true"
            >
            </dynamic-tree>
          </div>
        </div>
        <resize-bar /> -->
        <!-- <div
          style="
            min-width: 75%;
            max-width: 95%;
            padding: 10px 10px 0;
            height: 100%;
            width: calc(88% - 3px);
            float: right;
            box-sizing: border-box;
          "
        > -->
          <div class="mainContent">
            <template v-if="portal">
              <portal-view :params="portal" :root="this" />
            </template>
            <template v-else>
              <el-row v-if="formData.length > 0" class="mb10" style="margin-top:10px;" ref="formList">
                <el-col
                  class="flex"
                  v-for="(formItem, index) in formData"
                  :key="index"
                >
                  <template v-if="index % 2 == 0">
                    <span class="extendedMain fromTitle">
                      {{ formItem.name }}：
                    </span>
                    <span
                      class="extendedMain content"
                      :title="
                        formItem.prop == 'classfication'
                          ? menuDataInfo[formItem.prop]
                          : dataFormat(
                              formItem.prop,
                              menuDataInfo[formItem.prop]
                            )
                      "
                      v-html="
                        dataFormat(formItem.prop, menuDataInfo[formItem.prop])
                      "
                    >
                      <!-- {{dataFormat(formItem.prop,menuDataInfo[formItem.prop])}} -->
                    </span>
                    <template v-if="index != formData.length - 1">
                      <span class="extendedMain fromTitle">
                        {{ formData[index + 1].name }}：
                      </span>
                      <span
                        class="extendedMain content"
                        :title="
                          formData[index + 1].prop == 'classfication'
                            ? menuDataInfo[formData[index + 1].prop]
                            : dataFormat(
                                formData[index + 1].prop,
                                menuDataInfo[formData[index + 1].prop]
                              )
                        "
                        v-html="
                          dataFormat(
                            formData[index + 1].prop,
                            menuDataInfo[formData[index + 1].prop]
                          )
                        "
                      >
                        <!-- {{
                        dataFormat(
                          formData[index + 1].prop,
                          menuDataInfo[formData[index + 1].prop]
                        )
                      }} -->
                      </span>
                    </template>
                    <template v-if="index == formData.length - 1">
                      <span class="extendedMain fromTitle"></span>
                      <span class="extendedMain content"></span>
                    </template>
                  </template>
                </el-col>
              </el-row>
              <div class="manage-header">
                <el-form
                  :inline="true"
                  :model="queryParams"
                  ref="queryForm"
                  label-width="auto"
                  @submit.native.prevent
                >
                  <el-form-item
                    v-if="
                      searchFormData.length != 0 &&
                      searchFormData[0].status === '1'
                    "
                    :key="searchFormData[0].prop"
                    :label="searchFormData[0].name"
                  >
                    <el-input
                      size="small"
                      v-model="queryParams[searchFormData[0].prop]"
                      :placeholder="'请输入' + searchFormData[0].name"
                    ></el-input>
                  </el-form-item>

                  <el-form-item v-if="searchFormData.length != 0">
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      size="mini"
                      @click="handleQuery"
                      >搜索</el-button
                    >
                    <el-button
                      type="info"
                      icon="el-icon-refresh"
                      size="mini"
                      @click="resetQuery"
                      >重置</el-button
                    >
                    <el-button
                      v-if="searchFormData.length > 1"
                      icon="el-icon-arrow-down"
                      size="mini"
                      id="more-attr"
                      @click="moreattr"
                      >更多属性</el-button
                    >
                  </el-form-item>

                  <div id="more-list" style="display: none">
                    <el-form-item
                      v-for="item in searchFormData.slice(1)"
                      :key="item.prop"
                      :label="item.name"
                    >
                      <template v-if="item.status === '1'">
                        <!--根据type来显示是什么标签-->
                        <el-select
                          v-model="queryParams[item.prop]"
                          placeholder="请选择"
                          v-if="item.componentType === 'el-select'"
                        >
                          <el-option
                            v-for="item in item.optionValue"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          ></el-option>
                        </el-select>

                        <el-date-picker
                          v-model="queryParams[item.prop]"
                          size="small"
                          style="width: 240px"
                          value-format="yyyy-MM-dd"
                          type="daterange"
                          range-separator="-"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          v-if="item.componentType === 'el-date-picker'"
                        ></el-date-picker>

                        <el-input
                          size="small"
                          v-model="queryParams[item.prop]"
                          :placeholder="'请输入' + item.name"
                          v-else
                        ></el-input>
                      </template>
                    </el-form-item>
                  </div>
                </el-form>
                <!--<dynamic-search-form inline :formData="formData" :form="listQuery" @postForm="postData"></dynamic-search-form>-->
              </div>

              <el-row :gutter="10" class="mb8" ref="toolbar">
                <el-col :span="1.5">
                  <div
                    v-for="(toolbar, index) in toolbarData"
                    :key="index"
                    style="display: inline-block"
                  >
                    <template
                      v-if="
                        (toolbar.info.display == 0 &&
                          toolbar.data.length >= 4) ||
                        toolbar.info.display == 2
                      "
                    >
                      <el-dropdown
                        style="
                          padding: 0;
                          margin-right: 10px;
                          margin-left: 10px;
                        "
                      >
                        <el-button type="primary" size="mini">
                          <i :class="toolbar.info.icon"></i>
                          {{ toolbar.info.description }}
                          <i class="el-icon-arrow-down"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item
                            v-for="(btn, key) in toolbar.data.filter(
                              (item) =>
                                item.status === '1' && item.location === '2'
                            )"
                            :key="key"
                          >
                            <el-button
                              size="mini"
                              type="text"
                              :icon="btn.icon"
                              @click="clickEvent(btn)"
                              :disabled="
                                btn.show != null &&
                                btn.show != undefined &&
                                btn.show != ''
                                  ? !dynamicEval($data, btn.show)
                                  : false
                              "
                              v-preventReClick
                              >{{ btn.name }}</el-button
                            >
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </template>
                    <template
                      v-if="
                        (toolbar.info.display == 0 &&
                          toolbar.data.length < 4) ||
                        toolbar.info.display == 1
                      "
                    >
                      <div
                        v-for="(btn, index) in toolbar.data"
                        :key="index"
                        style="display: inline-block; margin: 0 3px"
                      >
                        <template v-if="btn.name == '全编辑'">
                          <el-button
                            v-if="!editall"
                            :type="btn.styleType"
                            :icon="btn.icon"
                            size="mini"
                            @click="clickEvent(btn)"
                            >{{ btn.name }}
                          </el-button>
                          <el-button
                            type="primary"
                            size="mini"
                            @click="subEditAll()"
                            v-if="editall"
                            >保存</el-button
                          >
                          <el-button
                            type="info"
                            size="mini"
                            @click="cancelEditAll()"
                            v-if="editall"
                            >取消</el-button
                          >
                        </template>
                        <template v-else>
                          <el-button
                            v-if="btn.status === '1' && btn.location === '2'"
                            :type="btn.styleType"
                            :icon="btn.icon"
                            size="mini"
                            @click="clickEvent(btn)"
                            :disabled="
                              btn.show != null &&
                              btn.show != undefined &&
                              btn.show != ''
                                ? !dynamicEval($data, btn.show)
                                : false
                            "
                            v-preventReClick
                            >{{ btn.name }}
                          </el-button>
                        </template>
                      </div>
                    </template>
                  </div>
                </el-col>
                <el-popover
                  title="列筛选"
                  trigger="click"
                  style="float: right; margin-right: 10px"
                >
                  <el-checkbox-group v-model="checkedColumns" size="mini">
                    <el-checkbox
                      style="display: block"
                      v-for="item in tableData"
                      :key="item.name"
                      :label="item.name"
                      @change="chickBoxGroupChange(item)"
                      >{{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                  <el-button size="small" slot="reference"
                    ><i class="el-icon-arrow-down el-icon-menu"></i
                  ></el-button>
                </el-popover>
              </el-row>

              <template v-if="tableData.length > 0">
                <!--列表数据-->
                <dynamic-tree-table
                  ref="treeTable"
                  v-if="type == 'tree_table'"
                  :list="list"
                  @handleSelectionChange="handleSelectionChange"
                  @editChanged="editChanged($event)"
                  @SetFlag="SetFlag()"
                  :options="options"
                  :columns="tableData"
                  :operates="operates"
                  :flag="flag"
                  :diff="200"
                >
                </dynamic-tree-table>
                <template v-else>
                  <dynamic-table
                    ref="dyTable"
                    :list="list"
                    @handleSelectionChange="handleSelectionChange"
                    @handleNodeClick="handleNodeClick"
                    @editChanged="editChanged($event)"
                    :options="options"
                    :columns="tableData"
                    :operates="operates"
                    :diff="diff"
                  >
                  </dynamic-table>
                  <pagination
                    v-show="total > 0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
                  />
                </template>
              </template>
              <!-- 添加或修改对话框 -->
              <el-dialog
                ref="addForm"
                :title="title"
                :visible.sync="open"
                width="50%"
              >
                <dynamic-form
                  :addform="addFormData"
                  :form="form"
                  :rules="rules"
                  :addurl="addurl"
                  v-on:openChanged="openChanged($event)"
                ></dynamic-form>
              </el-dialog>
              <!-- 添加或修改对话框 -->
              <el-dialog
                ref="formTable"
                :title="title"
                :visible.sync="topen"
                width="80%"
                v-dialogDrag
                :close-on-click-modal="false"
                v-if="topen"
              >
                <dynamic-form-table
                  ref="addFormTable"
                  :exsitId="exsitId"
                  :geturl="geturl"
                  :submiturl="addurl"
                  @openTable="openTable($event)"
                  @topenChanged="topenChanged($event)"
                  @clickEvent="clickEvent"
                  @updateIds="setIds"
                  @subBatch="subBatch"
                  :table="table"
                  :toolbar="toolbar"
                  :command="command"
                  :form="form"
                >
                </dynamic-form-table>
              </el-dialog>
            </template>
          </div>
        <!-- </div> -->
      </div>
    </section>
  </div>
</template>

<script>
import dynamicSearchForm from "@/views/components/dynamicSearchForm";
import dynamicTable from "@/views/components/dynamicTable";
import dynamicForm from "@/views/components/dynamicForm";
import dynamicTreeTable from "@/views/components/dynamicTreeTable";
import {
  baseRequest,
  getDataList,
  getConfigInfo,
  getTreeData,
  getFolderTree,
  getTreeCommand,
  getData,
  getAddForm,
  delData,
  exportData,
} from "@/api/dynamic/dynamic";
import dynamicTree from "../../components/dynamicTree.vue";
import dynamicFormTable from "@/views/components/dynamicFormTable";
import { deepClone, filter2sub } from "@/utils";

export default {
  components: {
    dynamicSearchForm,
    dynamicForm,
    dynamicTable,
    dynamicTree,
    dynamicTreeTable,
    dynamicFormTable,
    resizeBar: () => import("@/views/components/resizeBar"),
    portalView: () => import("@/views/portal/index"),
  },
  data() {
    return {
      activeName: "menuData",
      activeIndex: "0",
      treeCurrent: 0,
      dataInfo: null,
      // 遮罩层
      // 加载层信息
      loading: [],
      // 选中数组
      ids: [],
      selected: [],
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      topen: false,
      show1: true,
      show2: true,
      operational: "0",
      pageTitle: "",
      options: {
        // table 的参数
        stripe: true, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: true, // 是否支持列表项选中功能
        expandColumn: "folderName",
      },
      folderName: "",
      keyword: "",
      params: {},
      toolbarData: [],
      searchFormData: [],
      tableData: [],
      formData: [],
      menuData: [],
      showMenuData: [],
      treeData: [],
      commandData: [],
      list: [],
      type: "table",
      checkedColumns: [],
      columns: [], // 需要展示的列
      operates: {
        // 列操作按钮
        width: 150,
        list: [],
      },
      flag: true,
      queryConfigParams: {},
      queryTreeParams: {},
      fileUrl: undefined,
      projectid: "",
      parentid: "",
      parent: null,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      form: {},
      rules: {},
      addFormData: [],
      exsitId: [],
      addurl: "",
      toolbar: "",
      table: "",
      command: "",
      portal: null,
      diff: 0,
      dif: 0,
      update: 0,
    };
  },
  created() {
    // this.params=eval("(" + this.$route.meta.pageParams + ")");
    this.params = JSON.parse(this.$route.meta.pageParams.replace(/'/g, '"'));
    // this.getTree();
    let currentIndex = sessionStorage.getItem(this.$route.path);
    this.activeIndex = currentIndex ? String(currentIndex) : "0";
    this.getConfig();
    this.getMenuList();
  },
  updated() {
    if (typeof this.$refs != "{}"&&this.update>-1) {
      if (this.update < 3) {
        this.update += Object.keys(this.$refs).length;
      } else {
        this.update =-1;
        this.diff = 60;
        this.dif = 0
        for (let x in this.$refs) {
          if (x.indexOf("Table") == -1) {
            let h = this.$refs[x]&&this.$refs[x].$el?this.$refs[x].$el.offsetHeight:this.$refs[x].offsetHeight;
            if(x.indexOf("topInfo") > -1){
              this.dif += h;
            }
            this.diff += h;
          }
        }
      }
    }
  },
  watch: {
    keyword(val) {
      this.showMenuData = this.menuData.filter((item) => {
        if (!val) {
          this.showMenuData = this.menuData.slice();
          return true;
        }
        if (
          item.name.toLowerCase().indexOf(val) !== -1 ||
          item.name.toUpperCase().indexOf(val) !== -1
        ) {
          return item;
        }
      });
    },
  },
  methods: {
    /** 获取列表数据 */
    getMenuList() {
      this.loading = true;
      getDataList(this.$route.path).then((response) => {
        this.menuData = response.rows;
        if (response.total > 0) {
          this.showMenuData = this.menuData.slice();
          let i = Number(this.activeIndex);
          this.handleOpen(this.showMenuData[i], i);
          this.loading = false;
        }
      });
    },
    /** 获取配置信息 */
    getConfig() {
      this.loading = true;
      getConfigInfo(this.queryConfigParams).then((response) => {
        this.tableData = response.data.tableData;
        // this.toolbarData = response.data.toolbarData;
        this.formData = response.data.showFormData;
        // this.operates.list = response.data.commandData;
        this.tableData.forEach((item, index) => {
          this.checkedColumns.push(item.name);
        });
        this.loading = false;
      });
    },
    /** 获取树形数据 */
    getTree(url, item, commandIds) {
      this.loading = true;
      this.treeData = [];
      var treeInfo = {};
      treeInfo.id = item.id;
      treeInfo.label = item.name;
      treeInfo.children = [];
      treeInfo.url = "";
      treeInfo.pageParams = "";
      treeInfo.parentid = -1;
      this.treeData.push(treeInfo);

      getTreeCommand({ command: commandIds }).then((response) => {
        this.commandData = response.data;
        this.treeData[0].url = this.commandData[0].url;
        this.treeData[0].pageParams = this.commandData[0].pageParams;
        if (this.commandData.length > 0) {
          getFolderTree(url).then((response) => {
            let dataArray = response.data;
            dataArray.forEach((item, index) => {
              // if (this.commandData[1]) {
              //   dataArray[index].url = this.commandData[1].url;
              //   dataArray[index].pageParams = this.commandData[1].pageParams;
              // } else {
              //   dataArray[index].url = this.commandData[0].url;
              //   dataArray[index].pageParams = this.commandData[0].pageParams;
              // }
              dataArray[index].name = item.folderName;
              dataArray[index] = this.normalizer(item);
            });
            this.treeData[0].children = this.handleTree(dataArray, "id");
            this.handleNodeClick(this.treeData[0], 0);
            this.loading = false;
          });
        }
      });
    },
    GetUrl(url, item) {
      if (url.indexOf("{") != -1) {
        var substr = url.substring(url.indexOf("{") + 1, url.indexOf("}"));
        url = url.substring(0, url.indexOf("{"));
        if (substr.length > 0 && item) {
          url += item[substr];
        }
      }
      return url;
    },
    /** 转换数据结构 */
    normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        parentid: node.parentid,
        url: node.url,
        pageParams: node.pageParams,
      };
    },
    /** 获取树菜单配置 */
    getTreeConfig(type) {
      this.loading = true;
      getConfigInfo(this.queryTreeParams).then((response) => {
        this.tableData = response.data.tableData;
        this.formData = response.data.showFormData;
        // this.formData = this.formData.filter(
        //   (item) =>
        //     item.status == "1" &&
        //     (item.show != null && item.show != undefined && item.show != ""
        //       ? this.dynamicEval(this.params.rowParams, item.show)
        //       : true)
        // );
        if (response.data.showFormData.length > 0) {
          this.updateTempDicts(response.data.showFormData);
        }
        this.toolbarData = response.data.toolbarData;
        this.searchFormData = response.data.searchFormData;
        this.operates.list = response.data.commandData;
        this.loading = false;
        if (type.indexOf("table") > -1) this.getList();
      });
    },
    /** 获取列表数据 */
    getList() {
      this.loading = true;
      getDataList(
        this.fileUrl,
        this.type == "tree_table" ? {} : this.queryParams
      ).then((response) => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
        this.$forceUpdate();
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.selected = selection;
    },
    //查询按钮
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    //重置
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      };
      this.handleQuery();
    },
    handleOpen(item, i) {
      this.projectid = "";
      this.dataInfo = item;
      this.menuDataInfo = deepClone(this.dataInfo)
      this.projectid = item.id;
      this.activeIndex = String(i);
      this.operational = item.operational;
      sessionStorage.setItem(this.$route.path, this.activeIndex);
      var url = this.GetUrl(this.params.menuUrl, item);
      this.getTree(url, item, this.params.treeCommand);
      // this.queryTreeParams = { showForm: "template_show_form" };
      // this.getTreeConfig("form");
      // this.flag = true;
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 节点单击事件
    handleNodeClick(data) {
      if (this.treeCurrent != data.id) {
        if (data.id == -1) {
          this.parentid = 0;
        } else {
          this.parentid = data.id;
        }
        // this.queryTreeParams.toolbar = "";
        // this.queryTreeParams.form = "";
        // this.queryTreeParams.command = "";
        // this.queryTreeParams.table = "";
        // this.parentid = "";
        // if (data.pageParams) {
        if (data.parentid == -1) {
          data.pageParams = this.commandData[0].pageParams;
          data.url = this.commandData[0].url;
        } else if (data.children && data.children.length > 0) {
          let commandData = this.commandData[1] || this.commandData[0];
          data.pageParams = commandData.pageParams;
          data.url = commandData.url;
        } else {
          let commandData =
            this.commandData[2] || this.commandData[1] || this.commandData[0];
          data.pageParams = commandData.pageParams;
          data.url = commandData.url;
        }
        this.parent = data;
        this.treeCurrent = data.id;
        let pageParams = JSON.parse(data.pageParams.replace(/'/g, '"'));
        this.type = pageParams.type || "table";
        this.queryTreeParams = {};
        this.portal = false;
        if (pageParams.portal !== "" && pageParams.portal !== undefined) {
          this.portal = pageParams;
          return;
        }
        if (
          pageParams.command !== "" &&
          pageParams.command !== undefined &&
          this.operational !== "0"
        ) {
          this.queryTreeParams.command = pageParams.command;
        }
        if (pageParams.table !== "" && pageParams.table !== undefined) {
          this.queryTreeParams.table = pageParams.table;
        }
        if (pageParams.showForm !== "" && pageParams.showForm !== undefined) {
          this.queryTreeParams.showForm = pageParams.showForm;
        }
        if (
          pageParams.toolbar !== "" &&
          pageParams.toolbar !== undefined &&
          this.operational !== "0"
        ) {
          this.queryTreeParams.toolbar = pageParams.toolbar;
        }
        // this.type = pageParams.type ? pageParams.type : "table";
        this.queryParams = {
          pageNum: 1,
          pageSize: 20,
        };
        if (this.type != "table") {
          this.queryParams = {};
        }
        // var url = data.url;
        // if (url.indexOf("{") != -1) {
        //   // var substr1 = url.substring(url.indexOf("?") + 1, url.indexOf("="));
        //   // var substr2 = url.substring(url.indexOf("{") + 1, url.indexOf("}"));
        //   // url = url.substring(0, url.indexOf("?"));
        //   // this.queryParams[substr1] = data[substr2];
        //   url = this.getUrl(data.url,data)
        // }
        this.fileUrl = this.getUrl(data.url, this.$data);
        this.getTreeConfig(this.type);
        this.flag = true;
        // }
      }
    },
    clickEvent(obj) {
      if (obj.type === "2") {
        this.$router.push({ path: obj.url });
      } else {
        this.table = "";
        this.toolbar = "";
        this.title = "";
        this.command = "";
        // let pageParams =eval ("(" + obj.pageParams + ")");
        let pageParams = JSON.parse(obj.pageParams.replace(/'/g, '"'));
        if (pageParams.handle == "handleDelete") {
          this.handleDelete(obj.url, obj.description);
        } else if (pageParams.handle == "handleConfirm") {
          this.handleConfirm(
            obj.url,
            pageParams.method,
            obj.description,
            pageParams.condition
          );
        } else if (pageParams.handle == "handleExport") {
          this.handleExport(obj.url);
        } else if (pageParams.handle == "handleAdd") {
          // this.handleAdd(obj.url,pageParams.addForm,obj.description);
          if (pageParams.type == "table") {
            this.handleAddExited(obj);
          } else {
            if (obj.sub)
              this.handleAdd(obj.url, pageParams.addForm, obj.name, true);
            else this.handleAdd(obj.url, pageParams.addForm, obj.name);
          }
        } else if (pageParams.handle == "handleUpdate") {
          this.handleUpdate(obj.url, pageParams.addForm, obj.description);
        }
      }
    },
    handleConfirm(url, method, title, condition) {
      let jugement = this.jugeCondition(condition, url, title);
      if (jugement.flag) {
        this.$confirm(jugement.info, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            baseRequest(jugement.route, method, {}, {}).then((response) => {
              if (response.code == 200) {
                this.msgSuccess(response.msg);
                this.refreshCurrent();
                return true;
              } else {
                this.msgError(response.msg);
                return true;
              }
            });
          })
          .catch(() => {
            this.msgInfo("已取消");
          });
      }
    },
    /** 新增按钮操作 */
    handleAdd(url, str, title) {
      this.addurl = url;
      this.form = { projectid: this.projectid, parentid: this.parentid };
      this.getFormData(str, true);
      if (this.parent.documentPolicy) {
        this.form.policyid = this.parent.documentPolicy;
        this.addFormData.filter(
          (item) => item.prop == "policyid"
        )[0].editable = false;
      }
      this.open = true;
      this.title = title;
    },
    /**  添加已存在*/
    handleAddExited(obj) {
      let pageParams = eval("(" + obj.pageParams + ")");
      this.addurl = obj.url;
      this.table = pageParams.table;
      this.toolbar = pageParams.toolbar;
      this.command = pageParams.command;
      this.geturl = this.getUrl(pageParams.getUrl);
      if (obj.sub) {
        this.form = {
          projectid: this.projectid,
          parentid: this.parentid,
          toid: this.form.toid,
          formid: this.ids[0],
          pmsid: this.form.pmsid,
        };
        this.subtopen = true;
        this.subtitle = obj.name;
      } else {
        this.copy_geturl = this.geturl;
        if (this.ids.length > 0)
          this.form = {
            projectid: this.projectid,
            parentid: this.parentid,
            toid: this.ids[0],
          };
        else this.form = { projectid: this.projectid, parentid: this.parentid };
        if (this.projectid) this.form["pmsid"] = this.projectid;
        this.title = obj.name;
        this.topen = true;
      }
    },
    //获取表单数据
    getFormData(str, flag) {
      let formData = {};
      let optionData = JSON.parse(sessionStorage.getItem("optionsData"));
      getAddForm({ addForm: str }).then((response) => {
        formData = response.data;
        formData.forEach((item, index) => {
          if (
            item.componentType === "el-select" ||
            item.componentType === "el-selects" ||
            item.componentType === "el-radio" ||
            item.componentType === "el-checkbox-group"
          ) {
            if (
              item.prop === "policyid" ||
              item.prop === "stateid" ||
              item.prop === "ownerid"
            ) {
              formData[index].optionValue = optionData[item.optionValue];
            } else {
              if (
                this.tempDicts[item.prop] &&
                this.tempDicts[item.prop].length > 0
              ) {
                formData[index].optionValue = this.selectNormalizer(
                  deepClone(this.tempDicts[item.prop])
                );
              } else {
                if (item.optionValue.indexOf("url") > -1) {
                  let url = this.getUrl(item.optionValue.split(":")[1]);
                  getDataList(url).then((response) => {
                    if (response.code == 200) {
                      formData[index].optionValue = response.rows;
                    }
                  });
                } else {
                  this.getDicts(item.optionValue).then((response) => {
                    this.tempDicts[item.prop] = deepClone(response.data);
                    formData[index].optionValue = this.selectNormalizer(
                      response.data
                    );
                  });
                }
              }
            }
          }
          if (item.componentType === "el-cascader") {
            let optionarr = item.optionValue.split("?");
            if (optionarr.length > 1) {
              this.optionNormalizer(optionData[optionarr[0]]);
              let typearr = [];
              optionData[optionarr[0]].forEach((titem) => {
                if (titem.value === parseInt(optionarr[1])) {
                  typearr.push(titem);
                  formData[index].optionValue = typearr;
                }
              });
            } else {
              formData[index].optionValue = this.optionNormalizer(
                optionData[item.optionValue]
              );
            }
          }
        });
        this.addFormData = formData;
        if (flag) {
          for (let item of this.addFormData) {
            if (this.form[item.prop] == undefined) {
              this.$set(
                this.form,
                item.prop,
                item.defaultValue ? item.defaultValue : null
              );
            }
          }
        }
      });
    },
    /** 转换选项数据结构 */
    optionNormalizer(data) {
      data.forEach((item, index) => {
        data[index] = {
          value: item.id,
          label: item.description,
          parentid: item.parentid,
        };
      });
      return this.handleTree(data, "value");
    },
    /** 转换选项数据结构 */
    selectNormalizer(data) {
      data.forEach((item, index) => {
        data[index] = {
          id: item.dictValue,
          description: item.dictLabel,
        };
      });
      return data;
    },
    /** 修改按钮操作 */
    handleUpdate(url, str, title) {
      this.addurl = url;
      this.open = true;
      this.title = "编辑";
    },
    /** 删除按钮操作 */
    handleDelete(url, title) {
      const ids = this.ids;
      this.$confirm(
        `是否确认${title} "${
          this.selected[0].name ||
          this.selected[0].title ||
          this.selected[0].fileName ||
          this.selected[0].folderName
        }" ${this.ids.length > 1 ? "等" : ""}?`,
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return delData(url, ids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
        .catch(function () {});
    },
    /** 导出按钮操作 */
    handleExport(url) {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return exportData(url, queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        })
        .catch(function () {});
    },
    openChanged(val) {
      this.open = false;
      this.refreshCurrent();
    },
    topenChanged(val) {
      // this.flag = true
      if (this.subtopen) {
        this.subtopen = false;
        this.geturl = this.copy_geturl;
        this.$refs.addFormTable.getList(this.copy_geturl);
      } else {
        this.topen = false;
        if (val) {
          this.ids = [];
          this.refreshCurrent();
        }
      }
    },
    editChanged(val) {
      this.addurl = this.getUrl(val.url);
      this.getFormData(val.str);
      this.form = {};
      if (val.url) {
        if (val.url != "/doc/UpdateFile") {
          getData(val.url, val.id).then((response) => {
            this.form = response.data;
            this.open = true;
            this.title = val.title ? val.title : "编辑";
          });
        } else {
          this.form = {
            id: val.id,
            fileList: [],
            projectid: this.projectid,
            parentid: this.parentid,
          };
          this.open = true;
          this.title = val.title ? val.title : "编辑";
        }
      } else {
        this.open = true;
        this.title = val.title ? val.title : "编辑";
      }
    },
    setIds(val) {
      this.ids = val;
    },
    SetFlag() {
      this.flag = false;
    },
    subBatch(addform) {
      this.subtitle = "批量编辑";
      this.topen = false;
      for (let col of addform) {
        let current = this.addFormData.filter((item) => {
          return item.prop == col.prop;
        });
        if (current.length > 0) col = current[0];
      }
      this.form["ids"] = this.ids.join(",");
      this.addFormData = addform;
      this.subopen = true;
    },
    handleCollapseChange(index) {
      if (index != "") {
        this.handleOpen(this.showMenuData[index], index);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0;
  margin: 0;
  position: relative;
}
.collapesbutton {
  width: 14px;
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 0;
  border: none;
  margin: auto 0;
  z-index: 200;
}
.treeMenu {
  background-color: #f8f8f8;
  height: 100%;
  position: relative;
  // overflow: hidden;
}
.el-menu-item {
  border-bottom: 1px solid #dcdfe6;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
// .el-menu-vertical{
//   height: 100%;
// }
.app-container .head-container {
  height: 100%;
  overflow-y: auto;
  padding-left: 5px;
  padding-right: 5px;
  border-top: 1px solid #d8d8d8;
  border-bottom: 1px solid #dcdfe6;
}

.el-tabs__item {
  height: 30px;
  line-height: 30px;
}

.page-title {
  background: #fff;
  border: 1px solid #d8d8d8;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  /*margin-bottom: 5px;*/
}

.headerContent {
  float: left;
  padding: 20px 0 10px;
  width: 100%;
}

.extendedHeader {
  display: block;
  line-height: 23px;
  white-space: nowrap;
}

.extendedHeader.name {
  font-size: 16px;
  font-weight: bold;
  font-family: "3dsregular", Arial, Helvetica, sans-serif;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.extendedHeader.content {
  font-size: 13px;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.extendedHeader.fromTitle {
  font-size: 13px;
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.flex {
  display: flex;
}
.el-col-21[data-v-0e4055ba] {
  width: 87.5%;
}
.infinite-list {
  list-style: none;
  padding: 5px;
  margin: 0;
}

.infinite-list-item {
  list-style: none;
  padding: 5px;
  margin: 0;
  background-color: #f8f8f8;
  border-bottom: 1px solid #d8d8d8;
  position: relative;
}

.infinite-list-item.selected {
  list-style: none;
  padding: 5px;
  margin: 0;
  background-color: #fff;
  border-bottom: 1px solid #d8d8d8;
  position: relative;
}

.el-dropdown {
  padding: 10px;
  border-right: 1px solid #c3c3c3;
}

.mainContent {
  float: left;
  width: 100%;
  padding: 0 4px 0 5px;
  height: 100%;
  box-sizing: border-box;
}

.extendedMain {
  display: block;
  line-height: 23px;
  white-space: nowrap;
  border-bottom: #d8d8d8 solid 1px;
}
.extendedMain.name {
  font-size: 16px;
  font-weight: bold;
  font-family: "3dsregular", Arial, Helvetica, sans-serif;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.extendedMain.content {
  font-size: 13px;
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 5px 0 5px 10px;
}
.extendedMain.fromTitle {
  font-size: 13px;
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 5px 0 5px 10px;
  background-color: #f8f8f8;
}
.el-tree {
  //padding: 10px;
  // font-size: 14px;
  background-color: #f8f8f8;
}
//去掉最上级的before  after 即是去电最上层的连接线
/deep/ .el-tree > div {
  &::before {
    display: none;
  }
  &::after {
    display: none;
  }
}
.el-col-21 {
  width: 86%;
  float: right;
}
.max-size {
  width: 100% !important;
  max-width: 100% !important;
}
</style>
